<template>

  <div>

    <h2>{{title}}</h2>
<!--    <el-divider content-position="horizontal"></el-divider>-->
    <div style=" float: right;margin-bottom: 50px">
      <span>发布人：{{ pubulisher }}</span>
      <el-divider direction="vertical"></el-divider>
      <span>发布时间：{{ time }}</span>
    </div>

    <div style="left: auto ;margin-top: 100px">
      <p> {{ content }}</p>
      <el-divider content-position="right">End</el-divider>
    </div>


    <div class="col-md-4">
      <form class="form-horizontal">
        <div class="form-group">
          <h5>发表评论</h5>
          <textarea id="leaveMessage" class="form-control" rows="5" placeholder="评论内容" v-model="leaveMessage"></textarea>
          <button class="btn" @click="add">发表</button>
        </div>
      </form>
    </div>





<!--&lt;!&ndash;    <li class="list-group-item">&ndash;&gt;-->
<!--      <div class="handle">-->
<!--&lt;!&ndash;        <a href="javascript:;" @click="deleteItem">删除</a>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-button type="text" @click="open">回复</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->

<!--      <span v-for="item in commentList">-->
<!--         <p class="user"><span>{{item.lw_name}}</span><span>说:</span></p>-->
<!--         <p class="centence">{{ item.lw_content }}</p>-->
<!--        </span>-->

<!--      </div>-->







    <div style="border: 3px ;border: #080e32">
      <h4>评论</h4>
      <p v-if="commentList.length==0">暂无评论，我来发表第一篇评论！</p>
      <div v-else>
        <div class="commentList"  v-for="item in commentList" style="border: 3px ;border: #080e32">
          <b>{{item.lw_name}}   <span>{{item.lw_date}}</span></b>
          <p>{{item.lw_content}}</p>
        </div>
      </div>
    </div>








    </div>


</template>

<script>
import axios from "axios";

export default {
name: "ViewArticleDetail",

  data(){
  return{
    name:sessionStorage.getItem('stuName'),//留言人本人名字
    aId:this.$route.params.aId,          //文章id
    content:this.$route.params.content,  //文章内容
    title:this.$route.params.title,//文章题目
    pubulisher:this.$route.params.pubulisher,  //发布人名字
    time:this.$route.params.time,  //日期
    updateTime:"",//现在的日期
    commentList:'',
    leaveMessage:''

  }



  },

  created() {

    var that =this

        //  that.content=this.$route.params.content,  //文章内容
        // that.title=this.$route.params.title,//文章题目
        // that.pubulisher=this.$route.params.pubulisher,  //发布人名字
        // that.time=this.$route.params.time //日期


        axios.get('http://localhost:8080/jas/sport/leavewords/getComment/'+this.aId).then(function (resp){
          that.commentList = resp.data
          // console.log(resp.data)
        })



  },


  methods:{

   del(id){
    axios.get('http://localhost:8080/jas/sport/leavewords/deleteComment/'+id).then(function (resp) {

      // this.$router.push({name:'ViewNoticeDetail',params:{noticeId:row.id}})
    })
    location.reload();
  },

    add() {
      var _this = this
      var formData = new FormData();
      formData.append("lw_name",_this.name)
      formData.append("lw_content",_this.leaveMessage)
      formData.append("lw_forname",_this.pubulisher)
      formData.append("lw_aid",_this.aId)
      // formData.append("lw_date",_this.updateTime)
      console.log("foormData++++++++++"+formData)
      axios.post('http://localhost:8080/jas/sport/leavewords/addComment',formData).then(function (resp){
        // if(resp.data != null && resp.data!=''){
        //   _this.pId = resp.data
        // }
      }).catch(function (error) {
        //当出现500时（因为是根据输入的用户名和密码执行sql,可能出现空指针异常）
        _this.isShow = true
      })
      this.$router.push('/StudentMainPage/ArticleList')
      // location.reload()
    },


  }

}
</script>

<style scoped>

</style>